<template>
    <div class="yform">
        <div class="yform-header">
            <slot name="header-title"></slot>
        </div>
        <a-form :labelCol="{span:6}" :labelAlign="'right'" :model="formData">
            <a-row>
                <template v-for="formItem in props.formItems" :key="formItem.name">
                    <a-col :xs="props.cols.xs" :sm="props.cols.sm" :md="props.cols.md" :lg="props.cols.lg" :xl="props.cols.xl" :xxl="props.cols.xxl" >
                        <a-form-item :rules="formItem.rules" style="text-align: left" :name="formItem.field">
                            <template #label>
                                {{formItem.label}}
                            </template>
                            <template v-if="formItem.type === 'input'">
                                <a-input v-model:value="formData[`${formItem.field}`]" :placeholder="formItem.placeholder"/>
                            </template>
                            <template v-else-if="formItem.type === 'password'">
                                <a-input-password  v-model:value="formData[`${formItem.field}`]" :placeholder="formItem.placeholder" />
                            </template>
                            <template v-else-if="formItem.type === 'select'">
                                <a-select
                                    v-model:value="formData[`${formItem.field}`]"
                                    mode="multiple"
                                    style="width: 100%"
                                    :placeholder="formItem.placeholder"
                                    :options="formItem.options.options"
                                ></a-select>
                            </template>
                            <template v-else-if="formItem.type === 'datepicker'">
                                <a-date-picker  v-model:value="formData[`${formItem.field}`]" :placeholder="formItem.placeholder"/>
                            </template>
                            <template v-else-if="formItem.type === 'range-datepicker'">
                                <a-range-picker v-model:value="formData[`${formItem.field}`]" :placeholder="formItem.placeholder" />
                            </template>
                            <template v-else-if="formItem.type === 'timepicker'">
                                <a-time-picker v-model:value="formData[`${formItem.field}`]" :placeholder="formItem.placeholder ?? ''" />
                            </template>
                            <template v-else-if="formItem.type === 'range-timepicker'">
                                <a-time-range-picker v-model:value="formData[`${formItem.field}`]" :placeholder="formItem.placeholder"/>
                            </template>
                            <template v-else-if="formItem.type === 'switch'">
                                <a-switch
                                    v-model:checked="formData[`${formItem.field}`]"
                                    :checked-value="formItem.options.checkedValue"
                                    :un-checked-value="formItem.options.unCheckedValue"
                                >
                                    <template v-if="formItem.options.checkedChildren" #checkedChildren>
                                        {{formItem.options.checkedChildren}}
                                    </template>
                                    <template v-if="formItem.options.unCheckedChildren" #unCheckedChildren>
                                        {{formItem.options.unCheckedChildren}}
                                    </template>
                                </a-switch>
                            </template>

                        </a-form-item>
                    </a-col>
                </template>
            </a-row>
        </a-form>
        <div class="yform-footer">
            <slot name="header-footer"></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import {IFormItem} from "@/base-ui/form";



const props = withDefaults(defineProps<{
    formItems: IFormItem[],
    formModel: Record<string, any>,
    labelCol?: number,
    cols?: {
        xs: number,
        sm: number,
        md: number,
        lg: number,
        xl: number,
        xxl: number
    }
}>(), {
     formItems: () => [],
    formModel: () => {return {}},
    labelCol: 6,
    cols: () => {
         return {
             xs: 24,
             sm: 24,
             md: 8,
             lg: 8,
             xl: 6,
             xxl: 6
         }
    }
})

console.log(props.cols)

const emits = defineEmits<{
    (e: "update:formModel", newValue:any):void
}>()

const formData = reactive({...props.formModel})
console.log(formData)
watch(formData, newValue => {
    emits("update:formModel", newValue)
}, {
    deep: true
})

const value = ref(['a1', 'b2']);
</script>

<style scoped lang="less">
.yform{
    width: 100%;
    padding: 0px 20px;

    .ant-picker{
        width: 100%;
    }
    .ant-form-item-control-input-content{
        text-align: left;
    }
    .yform-header .yform-footer {
        width: 100%;
    }
}
</style>
